<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<div style="background: #fff;">
					<uni-search-bar class="uni-mt-10" radius="20" placeholder="请输入订单编号" clearButton="auto"
						cancelButton="none" bgColor="#F7F8FC" v-model="queryParams.orderNo" @confirm="search" />
				</div>
				<div class="nav-selion">
					<div style="margin-right: auto;">
						<u-tabs :list="list4" lineWidth="30" lineColor="#fff" :activeStyle="{
						            color:'#303133',
						            fontWeight: '500',
						        }" :inactiveStyle="{
						            color:'#A1ABB9',
									fontWeight: '400',
						        }" itemStyle="padding-left: 37px; padding-right: 10px; height: 44px;" @change="tabclick">
						</u-tabs>
					</div>

					<div class="zflex" style="align-items: center;" @click="toggle">
						<div class="shai">筛选</div>
						<image class="shaiImg" src="/static/images/shaixuan.png"></image>
					</div>
				</div>

				<div style="background: #F4F5F9;padding: 12px;" v-if="queryParams.status==2">
					<span style="color:#83878E ;">待核销总金额：</span><span
						style="font-weight: 500;">{{amount | formatsNumber}}元</span>
				</div>
				<div style="background: #F4F5F9;height: 12px;" v-else></div>

				<!-- <div style="background: #fff;position: absolute;top:100px;height: 200px;width: 100%;z-index: 99;">12312
				</div> -->
			</template>

			<view class="baseCon" v-for="(item,index) in dataList" :key="index"
				@click="goPage('/pages/order/detail?id=' + item.id)" style="margin-bottom: 12px;">
				<div class="same-w">
					<div class="same-lef" style="display: flex;align-items: center;">
						<span class="item-title">{{item.oilStationName}}</span>
					</div>
					<div class="same-rig">
						<span class="colorDai" v-if="item.status==2">待核销</span>
						<span class="colorno" v-if="item.status==3">已使用</span>
						<span class="colorno" v-if="item.status==7">已退款</span>
					</div>
				</div>
				<div class="zline"></div>

				<div class="zflex">
					<image class="oilImg" src="/static/images/oilImg.png"></image>
					<div style="width: calc(100% - 60px);margin-top: 12px;">
						<div class="zflex">
							<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{item.oilName}}</div>
							<div style="font-size: 13px;">约{{item.refueleQuantity}}L/kg</div>
						</div>
						<div><span class="oil-tl">实付：</span><span class="oil-tr">¥{{item.actualPayment}}</span></div>
					</div>
				</div>
				<div class="detail-lef" style="margin-top: 16px;font-size: 14px;">下单时间：{{item.gmtCreate}}</div>
			</view>
			<view style="height: 100px;"></view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		</z-paging>

		<uni-popup ref="popup" type="right" border-radius="10px 10px 0 0">
			<view class="selPupop">
				<div class="popTitlew">
					<div class="popTitLef">下单时间</div>
				</div>
				<div class="selpopCon">
					<div class="conwidth conwidth33" style="width:113px;margin-right: 0;padding-left: 10px;">
						<uni-datetime-picker type="datetime"
							v-model="beginGmtCreate">{{beginGmtCreate?parseTime(beginGmtCreate, '{m}-{d} {h}:{i}'):'最早时间'}}</uni-datetime-picker>
					</div>
					<div class="zpoplineWrap">
						<div class="zpoplineItem"></div>
					</div>

					<div class="conwidth conwidth33" style="width:113px;margin-right: 0;padding-left: 10px;">
						<uni-datetime-picker type="datetime"
							v-model="endGmtCreate">{{endGmtCreate?parseTime(endGmtCreate, '{m}-{d} {h}:{i}'):'最晚时间'}}</uni-datetime-picker>
					</div>
				</div>
				<div class="popTitlew">
					<div class="popTitLef">核销时间</div>
				</div>
				<div class="selpopCon">
					<div class="conwidth conwidth33" style="width:113px;margin-right: 0;padding-left: 10px;">
						<uni-datetime-picker type="datetime"
							v-model="beginUseDate">{{beginUseDate?parseTime(beginUseDate, '{m}-{d} {h}:{i}'):'最早时间'}}</uni-datetime-picker>
					</div>
					<div class="zpoplineWrap">
						<div class="zpoplineItem"></div>
					</div>

					<div class="conwidth conwidth33" style="width:113px;margin-right: 0;padding-left: 10px;">
						<uni-datetime-picker type="datetime"
							v-model="endUseDate">{{endUseDate?parseTime(endUseDate, '{m}-{d} {h}:{i}'):'最晚时间'}}</uni-datetime-picker>
					</div>
				</div>


				<div class="selfoot-wrap">
					<div class="selfoot-btn" style="margin-right: auto;" @click="resetQuery()">重置</div>
					<div class="selfoot-btn selfoot-btn2" @click="closeSearch()">确定</div>
				</div>
			</view>
		</uni-popup>

		<rzView :stationAuth="station.stationAuth" v-if="station.stationAuth==0||station.stationAuth==4"></rzView>
	</view>
</template>

<script>
	import {
		listMerchant,
		totalAmountVerified,
		getUserInfo,
	} from '@/request/api.js'
	import rzView from '@/pages/my/company/rzCard.vue'
	export default {
		components: {
			rzView
		},
		data() {
			return {
				val: '',
				amount: '',
				show: false,
				dataList: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					orderNo: '',
					status: 2, //2待核销3已完成7已退款
				},
				beginGmtCreate: '',
				endGmtCreate: '',
				beginUseDate: '',
				endUseDate: '',
				list4: [{
					name: '待核销'
				}, {
					name: '已完成'
				}, {
					name: '已退款'
				}],
				station: {
					stationAuth: null, //0未认证 1认证中 2已认证 3认证失败 4未上传企业资质
					stationId: null,
				},
				qxmanage: {
					isAfterSales: 0, // 售后权限 1是 0否
					isManageer: 0, // 是否管理员 1是 0否
					isWriteOff: 0, // 核销权限 1是 0否
				},
			}
		},
		mounted() {},
		onShareAppMessage() {
			return {
				title: ' ',
				path: '/pages/index/index'
			};
		},
		onShow() {
			this.getUInfo()
			this.initSearch()
		},
		methods: {

			toggle() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},

			resetQuery() {
				this.beginGmtCreate = ""
				this.endGmtCreate = ""
				this.beginUseDate = ""
				this.endUseDate = ""
			},

			getUInfo() {
				getUserInfo().then(res => {
					this.qxmanage.isWriteOff = res.isWriteOff
					this.qxmanage.isManageer = res.isManageer
					this.qxmanage.isAfterSales = res.isAfterSales

					this.station.stationAuth = res.stationAuth
					this.station.stationId = res.stationId

					if (res.stationAuth == 1 || res.stationAuth == 3) {
						this.goPage('/pages/my/company/detail?id=' + res.stationId)
					}
				})
			},

			closeSearch() {
				this.$refs.popup.close()
				this.initSearch()
			},
			search() {
				this.initSearch()
			},

			initSearch() {
				this.queryParams.pageNum = 1
				this.gettotalAnount()
				this.$refs.paging.reload(false);
			},

			gettotalAnount() {
				// this.queryParams.params = {};

				// this.queryParams.params["beginGmtCreate"] = this.beginGmtCreate ? this.beginGmtCreate : '';
				// this.queryParams.params["endGmtCreate"] = this.endGmtCreate ? this.endGmtCreate : '';
				let data = {
					beginGmtCreate: this.beginGmtCreate,
					endGmtCreate: this.endGmtCreate
				}

				totalAmountVerified(data).then(res => {
					this.amount = res.data
				})
			},


			queryList(pageNo, pageSize) {
				this.queryParams.params = {};
				if (this.beginGmtCreate && this.endGmtCreate) {
					this.queryParams.params["beginGmtCreate"] = this.beginGmtCreate;
					this.queryParams.params["endGmtCreate"] = this.endGmtCreate;
				}
				if (this.beginUseDate && this.endUseDate) {
					this.queryParams.params["beginUseDate"] = this.beginUseDate;
					this.queryParams.params["endUseDate"] = this.endUseDate;
				}
				let data = this.queryParams;
				data.pageNo = pageNo
				data.pageSize = pageSize
				listMerchant(this.queryParams).then((response) => {
					this.$refs.paging.complete(response.rows)
				}).catch(() => {
					this.$refs.paging.complete(false);
				})
			},

			tabclick(e) {
				if (e.index == 0) {
					this.queryParams.status = 2
				} else if (e.index == 1) {
					this.queryParams.status = 3
				} else {
					this.queryParams.status = 7
				}
				this.initSearch()
			},

			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},

		}
	}
</script>

<style scoped>
	.hdbg {
		background: #fff;
		position: relative;
		z-index: 99;
	}

	.order_head {
		display: flex;
		height: 44px;
		background: #fff;
		align-items: flex-end;
		position: relative;
		justify-content: center;
	}

	.headImg {
		width: 58px;
		height: 24px;
		position: absolute;
		left: 12px;
		top: 16px;
	}

	.wzWrap {
		display: flex;
		height: 30px;
		position: relative;
		justify-content: center;
	}

	.hline {
		height: 3px;
		width: 20px;
		background: #303133;
		border-radius: 2px;
		margin-top: 6px;
		display: inline-block;
		position: absolute;
		bottom: 0px;
		/* left: 6px; */
	}

	.selTxt {
		font-weight: 500;
		font-size: 16px;
		color: #303133;
	}

	.noTxt {
		font-weight: 500;
		font-size: 16px;
		color: #83878E;
	}

	.banView {
		display: flex;
		padding: 14px 12px;
		border-radius: 12px;
		box-sizing: border-box;
		background: #fff;
	}

	.banv50 {
		width: 50%;
		padding-left: 12px;
		box-sizing: border-box;
	}

	.banv50 .p1 {
		color: #83878E;
		margin-bottom: 4px;
	}

	.banv50 .p2 {
		font-size: 16px;
		font-weight: 500;
	}
</style>